<template>


  <van-tabbar v-model="bottomTabBarActiveIndex" route active-color="#e54847" inactive-color="#696969"
    @change="onChange">

    <van-tabbar-item icon="play-circle-o" replace to="/movie">电影/影院</van-tabbar-item>
    <van-tabbar-item icon="tv-o" replace to="/video">视频</van-tabbar-item>
    <van-tabbar-item icon="video-o" replace to="/clip" v-if="shouldShowClipTab">小视频</van-tabbar-item>
    <van-tabbar-item icon="coupon-o" replace to="/perform">演出</van-tabbar-item>
    <van-tabbar-item icon="user-o" replace to="/my">我的</van-tabbar-item>
  </van-tabbar>

</template>

<script setup>
import { computed } from 'vue'
import { useStore } from "@/stores/index.js"
import { useRoute } from 'vue-router'

const store = useStore()
const route = useRoute()

// const bottomTabBarActiveIndex = ref(0)
const bottomTabBarActiveIndex = computed(() => store.bottomTabBarActiveIndex)

const shouldShowClipTab = computed(() => route.path !== '/movie')
const onChange = (index) => {
  store.setBottomTabBarActiveIndex(index)
};


</script>


<style scoped>
.van-tabbar-item {
  cursor: pointer;
}
</style>
